<!DOCTYPE html>
<head>
    <title>
        classStyle绑定
    </title>
<script src="vue.js"></script>
</head>
<body>
<div id = "app">
    <div
    class="test"
    v-bind:class="[ isActive ? 'active' : '', isBig ? 'big' : '' ]"
    style='width:200px; height:200px; text-align:center; line-height:200px;'>
        hi vue
    </div>

    <div
    :style="{ color:color, fontSize:size, background: isCyan ? 'cyan' : ''}">
        hi vue
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : "#app",
        data : {
            isActive : true,
            isBig : 1,
            color : 'red',
            size : '50px',
            isCyan : true,
        },
        methods:{
        }
    })
</script>
<style type='text/css'>
    .test{color:cyan}
    .big{font-size:30px;}
    .active{background:red}
</style>
</body>
